<script setup lang="ts">


import {ref, watchEffect} from "vue";

const substanceData = defineProps({
    showSubstance: {
        type: Boolean,
        default: false
    },
    inputTeacher: {
        type: Array,
        default: () => {
            return []
        }
    },
    inputArticle: {
        type: Array,
        default: () => {
            return []
        }
    }
})

let success = ref()
let teacher = ref()
let article = ref()

watchEffect(() => {
    success.value = substanceData.showSubstance
    teacher.value = substanceData.inputTeacher
    article.value = substanceData.inputArticle
})

let url = 'http://192.168.5.120:8090'
const activeName = ref('first')

</script>

<template>
  <!--            请求成功后显示-->
    <div class="theRequestWasSuccessful" v-if="success">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="综合" name="first">
                <div class="consultants">
                    <div class="title">
                        <span><span>|</span>咨询师</span>
                        <span>更多</span>
                    </div>
                    <div class="substanceTeacher">
                        <a-empty v-if="teacher.length == 0" class="notDate" description="暂无搜索记录"
                                 image="../../src/assets/images/无数据.png"/>
                        <div v-else class="teacher" v-for="item in teacher" :key="item.id">
                            <div class="teacherBox">
                                <img :src="url + item.avatar" alt="" class="teacherImg">
                            </div>
                            <div class="teacherText">
                                <div class="title">
                                    <h4 class="titleH">{{ item.name }}</h4>
                                    <el-button type="info">已满</el-button>
                                </div>
                                <div class="introduce">
                                    {{ item.profession }}
                                </div>
                                <div class="label">
                                    <p class="learn pText" v-for="val in item.labels" :key="val.id">
                                        {{ val.label }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="essay">
                        <div class="title">
                            <span><span>|</span>文章</span>
                            <span>更多</span>
                        </div>
                        <a-empty v-if="article.length == 0" class="notDate" description="暂无搜索记录"
                                 image="../../src/assets/images/无数据.png"/>
                        <div v-else class="teacher" v-for="item in teacher" :key="item.id">
                            <div class="teacherBox">
                                <img :src="url + item.avatar" alt="" class="teacherImg">
                            </div>
                            <div class="teacherText">
                                <div class="title">
                                    <h4 class="titleH">{{ item.name }}</h4>
                                    <el-button type="info">已满</el-button>
                                </div>
                                <div class="introduce">
                                    {{ item.profession }}
                                </div>
                                <div class="label">
                                    <p class="learn pText" v-for="val in item.labels" :key="val.id">
                                        {{ val.label }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="咨询师" name="second">
                <a-empty v-if="teacher.length == 0" class="notDate" description="暂无搜索记录"
                         image="../../src/assets/images/无数据.png"/>
                <div v-else class="teacher" v-for="item in teacher" :key="item.id">
                    <div class="teacherBox">
                        <img :src="url + item.avatar" alt="" class="teacherImg">
                    </div>
                    <div class="teacherText">
                        <div class="title">
                            <h4 class="titleH">{{ item.name }}</h4>
                            <el-button type="info">已满</el-button>
                        </div>
                        <div class="introduce">
                            {{ item.profession }}
                        </div>
                        <div class="label">
                            <p class="learn pText" v-for="val in item.labels" :key="val.id">
                                {{ val.label }}
                            </p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="文章" name="third">
                <div class="title">
                    <span><span>|</span>文章</span>
                    <span>更多</span>
                </div>
                <a-empty v-if="article.length == 0" class="notDate" description="暂无搜索记录"
                         image="../../src/assets/images/无数据.png"/>
                <div v-else class="teacher" v-for="item in teacher" :key="item.id">
                    <div class="teacherBox">
                        <img :src="url + item.avatar" alt="" class="teacherImg">
                    </div>
                    <div class="teacherText">
                        <div class="title">
                            <h4 class="titleH">{{ item.name }}</h4>
                            <el-button type="info">已满</el-button>
                        </div>
                        <div class="introduce">
                            {{ item.profession }}
                        </div>
                        <div class="label">
                            <p class="learn pText" v-for="val in item.labels" :key="val.id">
                                {{ val.label }}
                            </p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>
.theRequestWasSuccessful {
    position: relative;
    top: 12%;
    left: 4%;
    width: 95%;

    .title {
        display: flex;
        justify-content: space-between;
    }

    .label {
        display: flex;
        justify-content: flex-start;

        .pText {
            margin: 3% 0;
            margin-right: 5%;
            min-width: 23%;
            min-height: 7vw;
            line-height: 7vw;
            background-color: #F2F9FF;
            color: #1590FB;
            text-align: center;
            border-radius: 8%;
            font-size: 12px;
        }
    }

    .teacher {
        display: flex;
        padding: 3%;
        margin-top: 3%;

        .teacherBox {
            width: 30%;

            .teacherImg {
                width: 100%;
                height: 100%;
                border-radius: 10%;
            }
        }

        .teacherText {
            margin-left: 3%;
            padding: 2%;
            flex: 1;

            .titleH {
                font-size: 5vw;
            }
        }
    }
}
.essay {
    margin-top: 10%;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.notDate {
    margin-top: 10%;
}
</style>